//index.js
// 引入net.js文件使用net.js的authRequest数据请求方法避免每次写交互都要写token请求头
import { authRequest } from '../../utils/net';


Page({
  data: {
    //地图中心点经纬度lat，log
    lat: 0,
    log: 0,
    markers: [],//单车座标
    controls: [],//控件位置
    is_deposit: true  //是否押金
  },

  onLoad: function () {
    var that = this;
    // 调用net.js的方法
    authRequest({
      url:'/my_info',
      method:"GET",
      success: function (res) {
        that.setData({
          // 保存押金状态
          is_deposit: res.data.data.is_deposit
        })
      }
    })
    
    // 加载动画
    wx.showLoading({
      title: '加载中',
    })
    // 1.5s后关闭加载动画
    setTimeout(function () {
      wx.hideLoading()
    }, 1500)
    // 使用 wx.createMapContext 获取 map 上下文 
    that.mapCtx = wx.createMapContext('map');

    //获取手机信息
    wx.getSystemInfo({
      success: function (res) {
        // 输出res得到以下这些参数
        // model	        手机型号	
        // pixelRatio	    设备像素比	
        // screenWidth	  屏幕宽度	
        // screenHeight	  屏幕高度	
        // windowWidth	  可使用窗口宽度	
        // windowHeight	  可使用窗口高度	
        // language	      微信设置的语言	
        // version	      微信版本号	
        // system	        操作系统版本	
        // platform	      客户端平台	
        // SDKVersion	    客户端基础库版本
        // 获取手机基本信息使用窗口宽高
        var height = res.windowHeight;
        var width = res.windowWidth;
        that.setData({
          controls: [{
            id: 1,
            iconPath: '/images/location.png',
            position: {
              width: 20,
              height: 35,
              left: width / 2 - 10,
              top: height / 2 - 35,
            },
            // 是否可点击
            clickable: true
          }, {
            id: 2,
            iconPath: '/images/img1.png',
            position: {
              left: 20,
              top: height - 60,
              width: 40,
              height: 40
            },
            clickable: true
          }, {
            id: 3,
            iconPath: '/images/qrcode.png',
            position: {
              left: width / 2 - 50,
              top: height - 45,
              width: 100,
              height: 40
            },
            clickable: true
          }, {
            id: 4,
            iconPath: '/images/pay.png',
            position: {
              left: width - 45,
              top: height - 45,
              width: 40,
              height: 40
            },
            clickable: true
          },
            // 手动在周围50米方位内放置一辆单车控件
          {
            id: 5,
            iconPath: '/images/bike.png',
            position: {
              width: 35,
              height: 40
            },
            // 是否可点击
            clickable: true
          }]
        });
      }
    })
    wx.getLocation({
      type: 'gcj02', //默认为 wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标
      // 返回可以用于wx.openLocation的经纬度
      success: function (res) {
        // 输出res得到以下这些参数
        // latitude	    纬度，浮点数，范围为 - 90~90，负数表示南纬
        // longitude	  经度，浮点数，范围为 - 180~180，负数表示西经
        // speed	      速度，浮点数，单位m / s
        // accuracy	    位置的精确度	
        // altitude	    高度，单位 m	1.2.0
        // verticalAccuracy	    垂直精度，单位 m（Android 无法获取，返回 0）
        // horizontalAccuracy	  水平精度，单位 m
        // 获取到当前的地理位置、速度。当用户离开小程序后，此接口无法调用；当用户点击“显示在聊天顶部”时，此接口可继续调用。
        // 获取当前的地理位置并把经纬度保存到data然后页面渲染
        var lat = res.latitude;
        var log = res.longitude;

        that.setData({
          lat: lat,
          log: log,
          // 单车的坐标
          // markers: [{
          //   iconPath: "/images/bike.png",
          //   width: 35,
          //   height: 40,
          //   latitude: lat - Math.random() / 2000,
          //   longitude: log - Math.random() / 2000
          // }, {
          //   iconPath: "/images/bike.png",
          //   width: 35,
          //   height: 40,
          //   latitude: lat + Math.random() / 2000,
          //   longitude: log + Math.random() / 2000
          // }, {
          //   iconPath: "/images/bike.png",
          //   width: 35,
          //   height: 40,
          //   latitude: lat - Math.random() / 2000,
          //   longitude: log - Math.random() / 2000
          // }, {
          //   iconPath: "/images/bike.png",
          //   width: 35,
          //   height: 40,
          //   latitude: lat + Math.random() / 2000,
          //   longitude: log + Math.random() / 2000
          // }]
        });

        authRequest({
          url: '/bikes',
          method: "GET",
          data: {
            lng: log,
            lat: lat
          },
          success: function (bikesResponse) {
            //定义bikes变量， map循环bikesResponse.data.data的值，添加图标还有图标的宽高，然后ruturn，输出一下bikes可以看到是一串数组
            const bikes = bikesResponse.data.data.map((item) => {
              return {
                id: item.id,
                iconPath: "/images/bike.png",
                width: 35,
                height: 40,
                latitude: item.lat,
                longitude: item.lng
              };
            });
            // 修改data里面的markers，将bikes保存到markers
            that.setData({
              markers: bikes
            });
          },
            // 请求失败的时候执行
          fail: function (errorResponse) {

          }
        });
      }
    })
  },

  // 	视野发生变化时触发
  regionchange(e) {
    console.log(e);
    var that = this;
    // 视野发生变化时后重新获取中心点经纬度
    if (e.type == 'end') {
      // getCenterLocation获取当前地图中心的经纬度，返回的是 gcj02 坐标系，可以用于 wx.openLocation
      that.mapCtx.getCenterLocation({
        success: function (res) {
          // 接口调用成功的回调函数 ，
          // res = {
          //    longitude: "经度",
          //    latitude: "纬度" 
          // }
          var lat = res.latitude;
          var log = res.longitude;

          authRequest({
            url: '/bikes',
            method:'GET',
            data: {
              lng: log,
              lat: lat
            },
            success: function (bikesResponse) {
              //定义bikes变量， map循环bikesResponse.data.data的值，添加图标还有图标的宽高，然后ruturn，输出一下bikes可以看到是一串数组
              const bikes = bikesResponse.data.data.map((item) => {
                return {
                  id: item.id,
                  iconPath: "/images/bike.png",
                  width: 35,
                  height: 40,
                  latitude: item.lat,
                  longitude: item.lng
                };
              });
              // 修改data里面的markers
              that.setData({
                markers: bikes
              });
            },
            fail: function (errorResponse) {

            }
          });
          // that.setData({
          //   markers: [{
          //     iconPath: "/images/bike.png",
          //     width: 35,
          //     height: 40,
          //     latitude: lat - Math.random() / 2000,
          //     longitude: log - Math.random() / 2000
          //   }, {
          //     iconPath: "/images/bike.png",
          //     width: 35,
          //     height: 40,
          //     latitude: lat + Math.random() / 2000,
          //     longitude: log + Math.random() / 2000
          //   }, {
          //     iconPath: "/images/bike.png",
          //     width: 35,
          //     height: 40,
          //     latitude: lat - Math.random() / 2000,
          //     longitude: log - Math.random() / 2000
          //   }, {
          //     iconPath: "/images/bike.png",
          //     width: 35,
          //     height: 40,
          //     latitude: lat + Math.random() / 2000,
          //     longitude: log + Math.random() / 2000
          //   }]
          // })
        },
        fail: function (res) {
          // fail
        }
      });
    };
  },
  controltap(e) {
    var that = this;
    console.log(e.controlId);
    if (e.controlId == 2) {
      // 将地图中心移动到当前定位点，需要配合map组件的show-location使用
      that.mapCtx.moveToLocation();
    }
    if (e.controlId == 3) {
      // 如果有交押金也就是不为0的时候即可调用这个方法
      if (that.data.is_deposit == true) {
        // 调起客户端扫码界面，扫码成功后返回对应的结果
        wx.scanCode({
          success: function (res) {
            console.log(res.result);
            //split 从 ：开始拆分成数组并保存bike_id第二个值
            wx.setStorageSync('bike_id', res.result.split(":")[1])
            // 输出res得到以下这些参数
            // result	    所扫码的内容d
            // scanType	  所扫码的类型
            // charSet	  所扫码的字符集
            // path	      当所扫的码为当前小程序的合法二维码时，会返回此字段，内容为二维码携带的 path
            wx.navigateTo({
              url: '../lock/index'
            });
          },
          fail: function (res) {
            console.log(res);
          }
        });
      } else {
        // 反之押金为0的时候跳转到押金充值页面
        // wx.navigateTo 保留当前页面(不关闭页面),跳转到应用内的某个页面
        wx.navigateTo({
          url: '../pledge/index'
        });
      };
    };
    if (e.controlId == 4) {
      // 跳转到充值
      wx.navigateTo({
        url: '../pay/index'
      });
    };
    // 手动在周围50米方位内放置一辆单车
    if (e.controlId == 5) {
      // getCenterLocation获取当前地图中心的经纬度，返回的是 gcj02 坐标系，可以用于 wx.openLocation
      that.mapCtx.getCenterLocation({
        success: function (res) {
          // 接口调用成功的回调函数 ，
          // res = {
          //    longitude: "经度",
          //    latitude: "纬度" 
          // }
          var lat = res.latitude;
          var log = res.longitude;

          authRequest({
            url: '/generate_bikes',
            method: 'POST',
            data: {
              lng: log,
              lat: lat
            },
            success: function (bikesResponse) {
              //定义bikes变量， map循环bikesResponse.data.data的值，添加图标还有图标的宽高，然后ruturn，输出一下bikes可以看到是一串数组
              const bikes = bikesResponse.data.data.map((item) => {
                return {
                  id: item.id,
                  iconPath: "/images/bike.png",
                  width: 35,
                  height: 40,
                  latitude: item.lat,
                  longitude: item.lng
                };
              });
              // 修改data里面的markers
              that.setData({
                markers: bikes
              });
            },
            fail: function (errorResponse) {

            }
          });
        },
        fail: function (res) {
          // fail
        }
      });
    };
  }
})
